<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>系统登陆</title>
    <link rel="stylesheet" href="/css/element-plus.css" />
    <script src="/js/vue3.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/element-plus.js"></script>
    <script src="/js/common.js"></script>
    <style>
      .loginform{
        width:500px;
        margin: 100px auto 0px auto;
      }
      .title{
        text-align: center;
        font-size:30px;
        padding:20px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="loginform">
        <div class="title">
          系统登陆
        </div>
        <el-form
          status-icon
          label-width="120px"
        >
          <el-form-item label="用户名" prop="age">
            <el-input v-model="username" />
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input v-model="password" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doLogin">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            username: 'admin',
            password: '123123'
          }
        },
        methods:{
          doLogin(){
            service.post("/common/login",{
              username: this.username,
              password: this.password
            }).then(res=>{
              if(res.code==200){
                var token = res.data.token
                localStorage.setItem("token", token)
                localStorage.setItem("userinfo", JSON.stringify(res.data))
                if(res.data.role==1){
                  location.href="admin.html"
                }else if(res.data.role==2){
                  location.href="teacher.html"
                }else if(res.data.role==3){
                  location.href="student.html"
                }
              }else{
                ElementPlus.ElMessage.error(res.data.msg)
              }
            }).catch(res=>{

            })
          }
        }
      })
      app.use(ElementPlus).mount('#app')
    </script>

  </body>
</html>
